<script setup>
import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
import { ElDrawer, ElMenu, ElMenuItem, ElTooltip, ElButton, ElInput, ElLink, ElSubMenu, ElMessage } from 'element-plus';


import speech from '@/views/content/util/speeh/speeh.vue'
import thinking from '@/views/content/util/speeh/thinking.vue'


import { msgChatpi } from '@/apis/alHelper'


const showMic = ref(true)
const showSend = ref(false)
const menuVisible = ref(false)

const inputMsg = ref('')

const inputBox = ref(null)


const isthinking = ref(false)
const defaultHeight = '20px'

const adjustInputHeight = () => {
    inputBox.value.style.height = defaultHeight
    const contentHeight = inputBox.value.scrollHeight
    inputBox.value.style.height = contentHeight > parseInt(defaultHeight) ? contentHeight + 'px' : defaultHeight
};
const inputHandle = () => {
    if (inputMsg.value == '') {
        showSend.value = false
        showMic.value = true


    } else {
        showMic.value = false
        showSend.value = true
    }

}

//快捷指令
const quickInstruct = ref([
    {
        name: '设置自动接单'
    },
    {
        name: '店铺经营分析'
    }
    , {
        name: '导出财务报表'
    },
    {
        name: '商品销量分析'
    },
    {
        name: '今日订单分析'
    },
    {
        name: '待办事项'
    }

])

// 切换菜单显示
const toggleMenu = () => {
    menuVisible.value = !menuVisible.value
}
const ballSize = ref(50)
// const posX = ref(100)
// const posY = ref(100)
// const velocityX = ref(0.5)
// const velocityY = ref(0.5)
// let animationFrameId = null

// const ballStyle = computed(() => ({
//     width: `${ballSize.value}px`,
//     height: `${ballSize.value}px`,
//     borderRadius: '50%',
//     position: 'absolute',
//     left: `${posX.value}px`,
//     top: `${posY.value}px`,
//     transition: 'transform 0.1s linear',
// }))

// function moveBall() {
//     const maxX = window.innerWidth - ballSize.value
//     const maxY = window.innerHeight - ballSize.value

//     posX.value += velocityX.value
//     posY.value += velocityY.value

//     if (posX.value <= 0 || posX.value >= maxX) {
//         velocityX.value *= -1;
//     }

//     if (posY.value <= 0 || posY.value >= maxY) {
//         velocityY.value *= -1;
//     }
// }

// function startAnimation() {
//     moveBall()
//     animationFrameId = requestAnimationFrame(startAnimation)
// }

// function stopAnimation() {
//     if (animationFrameId !== null) {
//         cancelAnimationFrame(animationFrameId)
//     }
// }
const ballStyle = ref({
    position: 'fixed',
    bottom: '20px',
    right: '20px',
    width: '60px',
    height: '60px',
    borderRadius: '50%',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: '#fff',
    fontSize: '24px',
    boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
    animation: 'jelly 0.6s infinite',
})




const showPop = ref(false)
const alMessage = ref('网络波动异常')

//处理消息发送
const MsgContentSend = async () => {
    isthinking.value = true
    let msg = inputMsg.value
    inputMsg.value = ''
    showMic.value = true
    showSend.value = false
    // inputMsg.value= inputMsg.value
    //输入消息的前置处理
    setTimeout(()=>{isthinking.value = false},20000) 
    const res = await msgChatpi(msg)
    isthinking.value = false


    if (res.code === 0) {
        console.log(res.data)
        alMessage.value = res.data
        showPop.value = true

        //后置处理功能
        // ElMessage({
        //     type:'info',
        //     message:res.data,
        //     duration:20000,
        //     showClose: true
        // })
    }

    if (res.code === -1) {
        ElMessage({
            type: 'error',
            message: '网络波动异常'
        })
    }

}


onMounted(() => {
    // startAnimation()
    watch(inputMsg, adjustInputHeight)
})

onUnmounted(() => {
    // stopAnimation()
})
</script>

<template>
    <div>
        <el-tooltip content="Hi,点击我试试吧！" placement="top" effect="dark">
            <div class="floating-ball" :style="ballStyle" @mouseenter="stopAnimation" @mouseleave="startAnimation"
                @click="toggleMenu">
            </div>
        </el-tooltip>
        <el-drawer v-model="menuVisible" title="功能菜单" direction="ltr" size="30%" :with-header="false">
            <header>
                <img src="@/assets/太阳.png" alt="">
                <h2 style="margin-top: 30px;">hi,我是您的助理小S</h2>


            </header>
            <section>
                <h3>试着对我说：</h3>
                <span v-for="(item, index) in quickInstruct">
                    <el-link @click="inputMsg = item.name; showSend = true; showMic = false" :underline="false">
                        <div class="queckFunc">
                            <div>{{ item.name }}</div>
                        </div>
                    </el-link>
                </span>


            </section>

            <footer>
                <el-row :gutter="5" style="">
                    <el-col :span="20">
                        <div style="">
                            <textarea @input="inputHandle" class="chat_input" v-model="inputMsg" placeholder="输入信息"
                                ref="inputBox" style="width: 100%;"></textarea>
                        </div>
                    </el-col>

                    <el-col :span="4">
                        <el-link :underline="false">
                            <div v-show="showMic" style="position: relative;top: -5px;">
                                <speech></speech>
                            </div>

                        </el-link>
                        <el-link :underline="false">
                            <div @click="MsgContentSend" v-show="showSend" class="send"></div>
                        </el-link>



                    </el-col>
                </el-row>
            </footer>


        </el-drawer>
        <div v-show="isthinking && menuVisible">
            <thinking></thinking>
        </div>



        <div>
            <el-dialog :model="true" v-model="showPop" draggable :show-close="true" style="position: relative;left: 150px;width: 900px;">


                <div style="">
                    <img style="" src="@/assets/太阳.png" alt=""><br>
                    <div class="alMsg"> {{ alMessage }}</div>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<style scoped>
.floating-ball {
    z-index: 9999;
    background-image: url('@/assets/太阳.png');
    background-size: cover;
    /* 确保背景图片覆盖整个元素 */
    background-position: center;
    /* 中心对齐图片 */
    /* background-color: aqua; */
    opacity: 0.6;
    /* 设置透明度为50% */


}



/* .liti {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
              0 4px 8px rgba(0, 0, 0, 0.1);
} */
.alMsg {
    font-size: 16px;
    margin: 0 40px;
    background-color: rgb(238, 240, 240);
    padding: 5px;
    border-radius: 5px;
    border: 2px solid rgb(220, 220, 235);

}

.send {
    width: 40px;
    height: 40px;
    background-image: url('@/assets/发送.png');
    background-size: cover;
    /* 确保背景图片覆盖整个元素 */
    background-position: center;
    /* 中心对齐图片 */
    position: relative;
    top: -5px;
}

section {
    height: 500px;
}

.queckFunc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 30px;
    margin: 20px 20px;
    border: 0.5px solid black;
    border-radius: 10px;
}

footer {
    width: 100%;
    position: absolute;
    bottom: 2%;

    .chat_input {
        border-radius: 5px;
        height: 30px;


        font-size: 15px;
        line-height: 25px;
        resize: none;
        /* 禁止用户调整输入框的大小 */

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
            0 4px 8px rgba(0, 0, 0, 0.1);
    }
}
</style>
